<script setup>
import { ref } from "vue";
import "element-plus/theme-chalk/el-message.css";
import { useUserStore } from "@/stores/user";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const form = ref({
  account: "",
  password: "",
  agree: false,
});
const router = useRouter();
const rules = ref({
  account: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 6, max: 14, message: "密码长度为6到14个字符", trigger: "blur" },
  ],
  agree: [
    {
      validator: (rule, value, callback) => {
        //自定义校验逻辑
        if (value) {
          callback();
        } else callback(new Error("请勾选协议"));
      },
    },
  ],
});
const userStore = useUserStore();
const formRef = ref(null);
const doLogin = () => {
  formRef.value.validate(async (valid) => {
    //valid:所有表单都通过校验 才为true
    console.log(valid);
    //以valid作为判断条件 如果通过校验才执行登录逻辑
    if (valid) {
      //TODO LOGIN
      await userStore.getSerInfo(form.value.account, form.value.password);
      ElMessage.success("登录成功");
      router.replace({
        path: "/",
      });
    }
  });
};
</script>

<template>
  <div
    style="
      width: 100%;
      height: 130px;
      display: flex;
      justify-content: space-between;
      background-color: white;
    "
    class="headerContainer"
  >
    <div class="logoContainer">
      <img class="logo" src="@/assets/images/logo.png" />
    </div>
    <div
      class="enterWeb"
      style="
        display: flex;
        width: 600px;
        height: 100%;
        justify-content: center;
        align-items: center;
      "
    >
      <div
        class="enterWebText"
        style="cursor: pointer"
        @click="$router.push('/')"
      >
        进入网站首页 >>
      </div>
    </div>
  </div>
  <div
    class="mainContainer"
    style="width: 100%; height: 485px; display: flex; align-items: center"
  >
    <div
      class="loginContainer"
      style="
        width: 450px;
        height: 330px;
        background-color: white;
        margin-left: 950px;
        padding: 0 20px 20px 20px;
      "
    >
      <div
        style="
          width: 100%;
          height: 80px;
          text-align: center;
          padding: 15px;
          font-size: 18px;
          font-weight: 700;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        账户登录
      </div>
      <el-divider style="margin: 0" />
      <div class="form" style="width: 100%; margin-top: 20px">
        <el-form
          ref="formRef"
          :rules="rules"
          :model="form"
          label-position="right"
          label-width="60px"
        >
          <el-form-item prop="account" label="账户">
            <el-input v-model="form.account"></el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item prop="agree" label-width="22px">
            <el-checkbox
              v-model="form.agree"
              size="large"
              style="font-weight: 700"
            >
              我已同意隐私条款和服务条款
            </el-checkbox>
          </el-form-item>
          <el-button
            @click="doLogin()"
            size="large"
            type="primary"
            style="width: 100%"
          >
            点击登录</el-button
          >
        </el-form>
      </div>
    </div>
  </div>
  <div class="footerContainer" style="width: 100%; height: 210px">
    <div
      class="us1"
      style="
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
      "
    >
      <div
        class="us1-container"
        style="display: flex; justify-content: center; width: 100%"
      >
        <div class="us1-items">关于我们</div>
        <div class="us1-items">帮助中心</div>
        <div class="us1-items">售后服务</div>
        <div class="us1-items">配送与验收</div>
        <div class="us1-items">商务合作</div>
        <div class="us1-items">搜索推荐</div>
        <div class="us1-items">友情链接</div>
      </div>
      <div style="display: flex; justify-content: center; color: #6c6b69">
        CopyRight @ 小兔鲜儿
      </div>
    </div>
  </div>
</template>


<style scoped>
.logoContainer {
  height: 100%;
  width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo {
  height: 70%;
}
.enterWebText:hover {
  color: #27ba9b;
}
.mainContainer {
  background-image: url("@/assets/images/login-bg.png");
}
.us1-items {
  color: #6c6b69;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #d3d0cc;
  padding: 0 10px;
}
.us1-items:last-child {
  border: 0;
}
</style>